<!-- 我的订单页面 -->
<template>
	<view class="my-orders-box">
		<view class="top-checked-box" style="border-top: 1px solid #97979F;">
			<!-- 下拉菜单 -->
			<u-dropdown active-color="#00C9B1">
				<u-dropdown-item v-model="checkedValue" :title="checkedList[checkedValue - 1].label" :options="checkedList" @change="checkedClick"></u-dropdown-item>
			</u-dropdown>
		</view>
		<!-- tabs 导航栏 -->
		<view class="top-checked-box tabs-box" v-if="checkedValue != 4">
			<u-tabs
				v-if="checkedValue < 3"
				:list="doorTabsList"
				:is-scroll="false"
				font-size="28"
				active-color="#00C9B1"
				:show-bar="false"
				:current="current"
				@change="tabsChange"
			></u-tabs>
			<u-tabs
				v-else-if="checkedValue === 3"
				:list="lawTabsList"
				:is-scroll="false"
				font-size="28"
				active-color="#00C9B1"
				:show-bar="false"
				:current="current"
				@change="tabsChange"
			></u-tabs>
		</view>
		<!-- 订单主体区域 -->
		<scroll-view
			scroll-y="true"
			class="order-container-box"
			:class="[checkedValue === 4 ? 'order-manxheight' : '']"
			:refresher-enabled="true"
			:refresher-triggered="isRefresh"
			@refresherrefresh="refresherStart"
			@scrolltolower="scrollToLower"
		>
			<block v-if="isOrderListNull"><u-empty text="暂无历史数据" mode="history"></u-empty></block>
			<block v-else>
				<!-- 循环渲染 上门服务 类别下的订单 -->
				<block v-for="order in orderList" :key="order.order_id">
					<order-item :order_type="checkedValue" :orderItem="order" @click="orderItemClick" @confirmOrderItem="confirmOrderItem"></order-item>
				</block>
			</block>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
				order_type: '', // 1：上门服务 2：面对面服务
				status: '' // -999：返回全部类型，0：待付款 1：待预约 2：预约成功 3：预约完成 -1：预约失败
			},
			// 默认选中项的 value 值，这个值表示不同的订单类别:
			// 1：上门服务(默认),2：面对面咨询，3：官司订单，4：图文咨询
			checkedValue: 1,
			// 模拟顶部的下拉选择的列表数据
			checkedList: [
				{
					label: '上门服务',
					value: 1
				},
				{
					label: '面对面咨询',
					value: 2
				},
				{
					label: '官司订单',
					value: 3
				},
				{
					label: '图文咨询',
					value: 4
				}
			],
			// 上门服务 类别中的 tab 栏中的可选订单状态
			doorTabsList: [
				{
					name: '待服务'
				},
				{
					name: '已完成'
				},
				{
					name: '已失效'
				}
			],
			// 官司订单 类别中的 tab 栏中的数据
			lawTabsList: [
				{
					name: '已接单'
				},
				{
					name: '已完成'
				}
			],
			isRefresh: false,
			// tabs 栏选中项的索引值
			current: 0,
			// 符合页面渲染条件的数据的数组
			orderList: [],
			isOrderListNull: false // 如果没有订单数据则此值为 true
		};
	},
	onLoad() {
		this.getOrderList();
	},
	onShow() {
		// 判断是否需要刷新下此页面的数据
		if (this.vuex_isSubmit) {
			this.sortData.page = 1;
			this.orderList = [];
			this.getData();
			this.vuex_isSubmit = false;
		}
	},
	// watch: {
	// 	orderList(list) {
	// 		console.log('watch中的orderList', list);
	// 		if(list.length < 1) return this.isOrderListNull = true
	// 		this.isOrderListNull = false
	// 	}
	// },
	methods: {
		// 获取上门/面对面类型订单数据
		async getOrderList() {
			let params = this.sortData;
			params.order_type = this.checkedValue; // 订单类型
			// console.log('tabs in index is :', this.current);
			switch (this.current) {
				case 0:
					params.status = 2; // 这里 2 表示获取 预约成功 的订单
					break;
				case 1:
					params.status = 3; // 这里 3 表示获取 预约完成 的订单
					break;
				case 2:
					params.status = -1; // 这里 -1 表示获取 预约失败 的订单
					break;
			}
			const res = await this.$u.api.getLawyerServiceList(params);
			if (!res) return;
			if (res.length < 1) {
				if (this.orderList.length < 1) return (this.isOrderListNull = true);
				this.isOrderListNull = false;
				this.sortData.page = this.sortData.page < 2 ? 1 : this.sortData.page - 1;
				return;
			};
			this.orderList = [...this.orderList, ...res];
			this.isOrderListNull = false;
		},
		// 获取官司订单
		async getLawsuitList() {
			let params = this.sortData;
			params.status = this.current === 0 ? 2 : 4; // 2：已接单 4：订单完成
			const res = await this.$u.api.getLawsuitList(params);
			if (!res) return;
			if (res.length < 1) {
				if (this.orderList.length < 1) return (this.isOrderListNull = true);
				this.isOrderListNull = false;
				this.sortData.page = this.sortData.page < 2 ? 1 : this.sortData.page - 1;
				return;
			}
			this.orderList = [...this.orderList, ...res];
			this.isOrderListNull = false;
		},
		// 获取图文咨询订单
		async getTalkOrderList() {
			const res = await this.$u.api.getTalkOrderList(this.sortData);
			if (!res) return;
			if (res.order.length < 1) {
				if (this.orderList.length < 1) return (this.isOrderListNull = true);
				this.isOrderListNull = false;
				this.sortData.page = this.sortData.page < 2 ? 1 : this.sortData.page - 1;
				return;
			}
			let arr = [];
			res.order.forEach(item => {
				item.lawyer_info = res.lawyer_info;
				arr.push(item);
			});
			this.orderList = [...this.orderList, ...arr];
			this.isOrderListNull = false;
		},
		// 判断订单类型和订单状态获取符合条件的数据
		getData() {
			if (this.checkedValue <= 2) {
				// 1 和 2 则订单类型为上门或者面对面
				this.getOrderList(); // 重新获取页面数据列表
			} else if (this.checkedValue === 3) {
				// 获取官司订单
				this.getLawsuitList();
			} else if (this.checkedValue === 4) {
				// 获取图文咨询订单
				this.getTalkOrderList();
			}
		},
		// 顶部下拉选择框的改变事件
		checkedClick(value) {
			// value 对应着下拉选择数据列表中的 value
			this.checkedValue = value;
			this.current = 0;
			this.sortData.page = 1;
			this.orderList = [];
			this.getData();
		},
		// 顶部 tab 栏的点击事件
		tabsChange(index) {
			this.current = index;
			this.sortData.page = 1;
			this.orderList = [];
			this.getData();
		},
		// 订单项的点击事件
		orderItemClick(case_id) {
			if (this.checkedValue === 3) {
				// 如果订单类型是 官司订单才跳转到需求详情页
				// 携参跳转到需求详情页
				this.$u.route('/myPackageA/pages/views/order-details?id=' + case_id);
			}
		},
		// 监听律师将一个订单操作完成的事件
		confirmOrderItem(id) {
			let index = this.orderList.findIndex(item => item.id === id);
			this.orderList.splice(index, 1);
		},
		// scroll-view 的下拉刷新
		async refresherStart() {
			this.isRefresh = true; // 下拉刷新被触发的状态
			this.sortData.page = 1; // 重置 页码
			this.orderList = []; // 清空页面已有数据
			await this.getData(); // 重新获取最新的数据列表
			this.isRefresh = false; // 关闭下拉刷新状态
			this.$u.toast('页面已刷新'); // 提示操作结果
		},
		// scroll-view 滚动条触底事件(获取下一页的数据)
		scrollToLower() {
			this.sortData.page += 1;
			this.getData();
		}
	}
};
</script>

<style lang="scss" scoped>
.my-orders-box {
	height: 100vh;
	background-color: #f5f5f5;
	overflow: hidden;
}
.top-checked-box {
	height: 88rpx;
	background-color: white;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
}
.tabs-box {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #141418;
}

.order-container-box {
	height: calc(100vh - 176rpx);
	background-color: #f5f5f5;
	padding-top: 1rpx;
	padding-top: 20rpx;
}
.order-manxheight {
	height: calc(100vh - 88rpx);
}
</style>
